<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
            <el-form-item label="所属战队" prop="roleName">
                <el-input
                    v-model="queryParams.roleName"
                    placeholder="请输入"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="所属招商经理" prop="roleName">
                <el-input
                    v-model="queryParams.roleName"
                    placeholder="请输入"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="项目" prop="roleName">
                <el-input
                    v-model="queryParams.roleName"
                    placeholder="请输入"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="线类型" prop="status">
                <el-select
                    v-model="queryParams.status"
                    placeholder="请选择"
                    clearable
                >
                <el-option
                    v-for="dict in dict.type.line_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
                </el-select>
            </el-form-item>
            <el-form-item label="开线时间">
                <el-date-picker
                    v-model="dateRange"
                    type="date"
                    placeholder="请选择"
                />
            </el-form-item>
            <el-form-item label="手机号" prop="roleKey">
                <el-input
                    v-model="queryParams.roleKey"
                    placeholder="请输入"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="门店地址">
                <el-cascader
                v-model="selectedOptions"
                :options="pcaTextArr"
                @change="handleChange"
                :props="{ checkStrictly: true }"
                ></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址关键字" prop="roleName">
                <el-input
                    v-model="queryParams.roleName"
                    placeholder="请输入"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            
            <el-form-item label="项目状态" prop="status">
                <el-select
                v-model="queryParams.status"
                placeholder="请选择"
                clearable
                >
                <el-option
                    v-for="dict in dict.type.project_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
                </el-select>
            </el-form-item>
            <el-form-item label="项目阶段" prop="status">
                <el-select
                v-model="queryParams.status"
                placeholder="请选择"
                clearable
                >
                <el-option
                    v-for="dict in dict.type.project_stage"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
                </el-select>
            </el-form-item>
            <el-form-item label="审核状态" prop="status">
                <el-select
                v-model="queryParams.status"
                placeholder="请选择"
                clearable
                >
                <el-option
                    v-for="dict in dict.type.audit_status"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row class="mb8" type="flex" justify="space-between">
            <el-col>
                <span>数据统计：总数10条</span>
            </el-col>
            <el-col style="text-align: right;">
                <el-button type="primary" plain size="mini" @click="openRefund = true">退定金</el-button>
                <el-button type="primary" plain size="mini" @click="openPeople = true">转交</el-button>
                <el-button type="primary" plain size="mini" @click="openTransfer = true">转项目</el-button>
                <el-button type="primary" plain size="mini" @click="goDetail(1)">项目详情</el-button>
                <el-button type="primary" plain size="mini" @click="handleEdit">编辑项目</el-button>
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['project:index:add']">新增项目</el-button>
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:role:export']" >导出</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column prop="date" label="所属战队" fixed />
            <el-table-column prop="name" label="所属招商经理" fixed width="100px" :show-overflow-tooltip="true" />
            <el-table-column prop="name" label="项目" fixed />
            <el-table-column prop="name" label="线类型" />
            <el-table-column prop="name" label="开线时间" />
            <el-table-column prop="name" label="经销商姓名" width="90px" />
            <el-table-column prop="name" label="手机号" />
            <el-table-column prop="name" label="角色/职务" />
            <el-table-column prop="name" label="门店名称" />
            <el-table-column prop="name" label="地址" />
            <el-table-column prop="name" label="详细地址" />
            <el-table-column prop="name" label="项目状态" />
            <el-table-column prop="name" label="项目阶段" />
            <el-table-column prop="name" label="审核状态" />
            <el-table-column prop="name" label="审核通过时间" width="120px" :show-overflow-tooltip="true" />
            <el-table-column prop="name" label="操作" fixed="right" width="180" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="goDetail(scope.row)">详情</el-button>
                    <el-button type="text">移交</el-button>
                    <el-button type="text" @click="releaseItem">退定金</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 移交 -->
        <el-dialog title="移交" :visible.sync="openPeople" width="600px" append-to-body>
            <div class="transfer">
                <el-form ref="form" :model="formPeople"  label-width="80px">
                    <el-form-item label="接受人员" prop="status">
                        <el-select v-model="formPeople.status" placeholder="请选择">
                            <el-option
                                v-for="dict in dict.type.line_type"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="formPeople.remark" type="textarea" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-form>
                <div class="tips">是否确认移交，确认后将发起项目移交审核？</div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitFormPeople">确 认</el-button>
                </div>
            </div>
        </el-dialog>
        
        <!-- 转项目 -->
        <el-dialog title="转项目" :visible.sync="openTransfer" width="600px" append-to-body>
            <div class="transfer">
                <el-form ref="form" :model="formTransfer"  label-width="80px">
                    <el-form-item label="合作项目" prop="roleName">
                        <el-input  v-model="formTransfer.roleName" placeholder="请输入"/>
                    </el-form-item>
                    <el-form-item label="线类型" prop="status">
                        <el-select v-model="formTransfer.status" placeholder="请选择">
                            <el-option
                                v-for="dict in dict.type.line_type"
                                :key="dict.value"
                                :label="dict.label"
                                :value="dict.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开线时间">
                        <el-date-picker v-model="dateRange" type="date" placeholder="请选择" />
                    </el-form-item>
                    <el-form-item label="折扣" prop="nickName">
                        <el-input v-model="formTransfer.nickName" >
                            <span slot="append">%</span>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="政策" prop="nickName">
                        <el-input v-model="formTransfer.nickName" />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="formTransfer.remark" type="textarea" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-form>
                <div class="tips">是否确认进行转项目操作，确认后将发起转项目审核</div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 认</el-button>
                </div>
            </div>
        </el-dialog>

        <!-- 退定金 -->
        <el-dialog title="退定金" :visible.sync="openRefund" width="600px" append-to-body>
            <div class="transfer">
                <el-form ref="form"  label-width="80px">
                    <el-form-item label="备注">
                        <el-input v-model="fundRemark" type="textarea" placeholder="请输入内容"></el-input>
                    </el-form-item>
                </el-form>
                <div class="tips">是否确认进行退定金操作，确认后将发起退定金审核</div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="openRefund = false">取 消</el-button>
                    <el-button type="primary" @click="openRefund = false">确 认</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { pcaTextArr } from "element-china-area-data";

export default {
    dicts: ['line_type','project_status','project_stage','audit_status'],
    data() {
        return {
            pcaTextArr,
            loading:false,
            dateRange: '',
            selectedOptions: [],
            queryParams: {      // 查询参数
                pageNum: 1,
                pageSize: 10,
                roleName: undefined,
                roleKey: undefined,
                status: undefined
            },
            tableData:[],
            openRefund:false,
            fundRemark:'',
            openPeople: false,
            formPeople:{},
            openTransfer:false,
            formTransfer:{}
        }
    },
    methods: {
        handleChange(e) {
            console.log(e);
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            // this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            // this.dateRange = []
            // this.resetForm("queryForm")
            // this.handleQuery()
        },
        handleAdd(){
            this.$router.push(
                { path: '/project/add' }
            )
        },
        
        handleExport(){

        },
        handleEdit(){
            this.$router.push(
                { path: '/project/edit' }
            )
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            // this.ids = selection.map(item => item.roleId)
            // this.single = selection.length!=1
            // this.multiple = !selection.length
        },
        goDetail(item){
            console.log(item)
            this.$router.push(
                { path: '/project/detail' }
            )
        },
        submitFormPeople(){

        },
        // 取消按钮
        cancel() {
            this.openTransfer = false
        },
        /** 提交按钮 */
        submitForm: function() {
            this.$refs["formTransfer"].validate(valid => {
                if (valid) {
                    console.log(99999)
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
    .transfer{padding: 20px 80px;
        .tips{text-align: center;}
        .dialog-footer{text-align: center;margin-top: 30px;}
    }
</style>
